<template>
  <section class="allCon">
    <!--start  面包屑-->
    <div class="location">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商城</el-breadcrumb-item>
        <el-breadcrumb-item>页面管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--start content-->
    <div class="content" id="content" ref="pageContent">
      <el-form :model="portalData.portalPageData" :rules="rule" ref="ruleForm" label-width="100px" class="scroll">
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="title">
             导航栏设置
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="portal-row" v-for="(item,index) in portalData.portalPageList">
            <el-col :span="4" class="text-center">
              导航栏{{index+1}}：
            </el-col>
            <el-col :span="7">
              <div  @click.stop="nowIndex(index)">
                <el-upload
                  class="over-hidden"
                  :action="portalData.uploadUrl"
                  list-type="picture-card"
                  :data="item.uploadData"
                  :file-list="item.fileList"
                  :before-upload="navBeforeAvatarUpload"
                  :on-remove="navRemove"
                  :on-preview="navPreview"
                  :on-success="navSuccess">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </div>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="websiteExtPropname" label-width="0px">
                <el-input v-model="item.websiteExtPropname" placeholder="请输入导航名称(不可超过4个汉字)"></el-input>
              </el-form-item>
              <el-form-item prop="websiteExtRemark " class="textarea-con" label-width="0px">
                <el-input type="textarea" v-model="item.websiteExtRemark " placeholder="请输入导航链接地址"></el-input>
              </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="20" style="padding-left: 10px;margin-bottom: 22px;clear: both">
          <el-col :span="24">
            <div class="title">
              基础设置
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="padding-left: 10px;margin-bottom: 22px;">
          <el-col class="leftWx">单笔最大购买量</el-col>
          <el-col :span="6"><el-input v-model="numTip" placeholder="请输入单笔最大购买量"></el-input></el-col>
          <el-col :span="6" class="numTips"><span>购物车单品购买时最大可选购数量</span></el-col>
        </el-row>
        <el-row :gutter="20" style="padding-left: 10px;margin-bottom: 22px;">
          <el-col class="leftWx">
            LOGO
          </el-col>
          <el-col :span="6">
            <el-upload
              class="over-hidden"
              :action="portalData.uploadUrl"
              list-type="picture-card"
              :data="portalData.logoPic.uploadData"
              :file-list="portalData.logoPic.fileList"
              :before-upload="logoBeforeAvatarUpload"
              :on-remove="logoRemove"
              :on-preview="logoPreview"
              :on-success="logoSuccess">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog v-model="portalData.logoPic.dialogVisible" size="tiny">
              <img width="100%" :src="portalData.logoPic.dialogImageUrl" alt>
            </el-dialog>
          </el-col>
        </el-row>
        <!--<el-row :gutter="20" style="padding-left: 10px;margin-bottom: 22px;">
          <el-col :span="2" style="text-align: center">
            微信二维码
          </el-col>
          <el-col :span="6">
            <el-upload
              class="over-hidden"
              :action="portalData.uploadUrl"
              list-type="picture-card"
              :data="portalData.wxPic.uploadData"
              :file-list="portalData.wxPic.fileList"
              :before-upload="wxBeforeAvatarUpload"
              :on-remove="wxRemove"
              :on-preview="wxPreview"
              :on-success="wxSuccess">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog v-model="portalData.wxPic.dialogVisible" size="tiny">
              <img width="100%" :src="portalData.wxPic.dialogImageUrl" alt>
            </el-dialog>
          </el-col>
        </el-row>-->
      </el-form>
    </div>
    <div class="btnBox">
      <el-button type="primary" @click="portalPage_saveBtn">保存</el-button>
      <el-button @click="portalPage_cancel">返回</el-button>
    </div>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        numTip:null,     //数量显示
        websiteCode:"",    //存储上个页面获取的数据
        portalData:{
          portalPageList:[],
          _index:0,
          portalPageData:{},
          logoPic:{        //logo图片
            fileList:[],
            logoPicUrls:"",
            dialogImageUrl:"",
            dialogVisible:false,
            canUpload:true,
            fileListLength:0,
            uploadData:{
              "moduleName":"portal",
              "fileName":"",
              "fromTable":"PortalWebsite",
              "fromCode":""
            }
          },
          wxPic:{        //logo图片
            fileList:[],
            wxPicUrls:"",
            dialogImageUrl:"",
            dialogVisible:false,
            canUpload:true,
            fileListLength:0,
            uploadData:{
              "moduleName":"portal",
              "fileName":"",
              "fromTable":"PortalWebsite",
              "fromCode":""
            }
          },
          uploadUrl:"/v3/misc/common/uploadFile",
        },
        rule:{
//          :[{required: true, message: '不能为空', trigger: 'blur'}],
        }
      }
    },
    watch:{
      //监视查询页面开始请求时带的图片数据，并展示出来
      "portalData.portalPageData.websiteLogoUrl":function(val,oldval){
        if(val){
          this.portalData.logoPic.fileList.push({url:""});
          return this.portalData.logoPic.fileList[0].url = val;
        }
      },
      "portalData.portalPageData.websiteWxPicurl":function(val,oldval){
        if(val){
          this.portalData.wxPic.fileList.push({url:""});
          return this.portalData.wxPic.fileList[0].url = val;
        }
      },



    },
    methods: {
      //自定义一个index文件
      nowIndex(index){
          this.portalData._index = index;
      },
      /*导航列表图片上传  start*/
      navBeforeAvatarUpload(file) {
        this.portalData.portalPageList[this.portalData._index].uploadData.fileName = file.name;
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG&&!isPNG) {
          this.Public.openError(this,"上传头像图片只能是 JPG和PNG 格式!");
        }
        if (!isLt2M) {
          this.Public.openError(this,"上传头像图片大小不能超过 2MB!");
        }
        return (isPNG || isJPG) && isLt2M;
      },

      navRemove(file, fileList){
          setTimeout(()=>{
            this.portalData.portalPageList[this.portalData._index].navPicUrls = "";
            this.portalData.portalPageList[this.portalData._index].websiteExtPropvalue= this.portalData.portalPageList[this.portalData._index].navPicUrls
          },1)
      },

      navPreview(file) {
        this.portalData.portalPageList[this.portalData._index].dialogImageUrl = file.url;
        this.portalData.portalPageList[this.portalData._index].dialogVisible = true;
      },

      navSuccess(response, file, fileList){
        this.portalData.portalPageList[this.portalData._index].navPicUrls = response;
        this.portalData.portalPageList[this.portalData._index].websiteExtPropvalue= this.portalData.portalPageList[this.portalData._index].navPicUrls
      },
      /* 导航列表图片上传  end*/

      queryNav(){
        this.axios({
          method:"POST",
          url:"/v3/portal/websiteExts/listAll",
          data:{
            "websiteCode":this.websiteCode,
            "dataFrom":0,
          }
        }).then((res) => {
          this.portalData.portalPageList = res.data.list;
          this.portalData.portalPageList.forEach((item,index,arr) =>{
            if(item.websiteExtPropvalue){
              this.$set(item, "fileList", [{url:""}]);
              item.fileList[0].url =  item.websiteExtPropvalue;
            }
            this.$set(item, "navPicUrls", "");
            this.$set(item, "dialogImageUrl", "");
            this.$set(item, "dialogVisible", false);
            this.$set(item, "fileListLength", 0);
            this.$set(item, "uploadData", {"moduleName":"portal","fileName":"", "fromTable":"PortalWebsite",});
          });
        }).catch((err)=>{
          this.Public.openError(this,err.response.data);
        });
      },

      //页面的保存按钮
      portalPage_saveBtn(){
      	if(isNaN(this.numTip)){
      		this.Public.openError(this,"请输入正确的最大购买数");
      		return;
      	}
        this.axios({
          method:"PUT",
          url:"/v3/portal/websites/"+this.websiteCode,
          data:{
          	"maxBuyGoodsNum":this.numTip,
            "websiteLogoUrl":this.portalData.logoPic.logoPicUrls,
            "websiteWxPicurl":this.portalData.wxPic.wxPicUrls,
            "websiteExtStr":JSON.stringify(this.portalData.portalPageList),
          }
        }).then((res) => {
          this.Public.openSuccess(this,"操作成功！");
          this.$router.push({path:"/portalWebsite"});
        }).catch((err)=>{
          this.Public.openError(this,err.response.data);
        });
      },

      //进入页面时获取的数据
      queryInfo(){
        this.axios({
          method:"GET",
          url:"/v3/portal/websites/"+this.websiteCode,
          data:{}
        }).then((res) => {
          this.portalData.portalPageData = res.data;
          this.portalData.logoPic.logoPicUrls = this.portalData.portalPageData.websiteLogoUrl;
          this.portalData.wxPic.wxPicUrls = this.portalData.portalPageData.websiteWxPicurl;
        }).catch((err)=>{
          this.Public.openError(this,err.response.data);
        });
      },

      //进入页面时获取的数据
      queryMaxBuyNum(){
        this.axios({
          method:"GET",
          url:"/v3/basic/params/MaxBuyGoodsNum",
          data:{
          	"paramKey":"MaxBuyGoodsNum"
          }
        }).then((res) => {
          this.numTip = res.data.paramValue;
        }).catch((err)=>{
          this.Public.openError(this,err.response.data);
        });
      },
      
      /*微信二维码图片上传  start*/
      wxBeforeAvatarUpload(file) {
        this.portalData.wxPic.uploadData.fileName = file.name;
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG&&!isPNG) {
          this.Public.openError(this,"上传头像图片只能是 JPG和PNG 格式!")
        }
        if (!isLt2M) {
          this.Public.openError(this,"上传头像图片大小不能超过 2MB!")
        }
        return (isPNG || isJPG) && isLt2M;
      },

      wxRemove(file,fileList){
        this.portalData.wxPic.wxPicUrls = "";
      },

      wxPreview(file) {
        this.portalData.wxPic.dialogImageUrl = file.url;
        this.portalData.wxPic.dialogVisible = true;
      },

      wxSuccess(response, file, fileList){
        this.portalData.wxPic.wxPicUrls = response;
      },
      /* 微信二维码图片上传  end*/

      /*LOGO图片上传  start*/
      logoBeforeAvatarUpload(file) {
        this.portalData.logoPic.uploadData.fileName = file.name;
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG&&!isPNG) {
          this.Public.openError(this,"上传头像图片只能是 JPG和PNG 格式!")
        }
        if (!isLt2M) {
          this.Public.openError(this,"上传头像图片大小不能超过 2MB!")
        }
        return (isPNG || isJPG) && isLt2M;
      },

      logoRemove(file,fileList){
        this.portalData.logoPic.logoPicUrls = "";
      },

      logoPreview(file) {
        this.portalData.logoPic.dialogImageUrl = file.url;
        this.portalData.logoPic.dialogVisible = true;
      },

      logoSuccess(response, file, fileList){
        this.portalData.logoPic.logoPicUrls = response;
      },
      /* LOGO图片上传  end*/

      /*页面管理返回按钮  start*/
      portalPage_cancel(){
        this.$router.push({path:"/portalWebsite"})
      },
      /*页面管理返回按钮 end*/

    },

    created(){
      this.websiteCode = localStorage.getItem("websiteCode");
      this.queryInfo();
      this.queryNav();
      this.queryMaxBuyNum();
    },

    mounted() {
      // 设置窗口高度 start
      var winHieg = document.documentElement.clientHeight;
      var cont = document.getElementById("content");
      cont.style.height = winHieg - 115 + "px";
      document.querySelector(".content form").style.height = (document.documentElement.clientHeight - 180) + 'px';

    },
  }
</script>
<style scoped>

  .leftWx{
    float: left;
    width: 110px;
  }

  .numTips{
    line-height: 36px;
    color: #999;
  }

  /* start upload */
  .avatar-uploader {
    display: inline-block;
  }
  .avatar-uploader .el-upload {
    vertical-align: middle;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    line-height: 40px !important;
    overflow: initial !important;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader-icon {
    font-size: 12px;
    color: #8c939d;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  .avatar {
    width: 40px;
    height: 40px;
    display: block;
  }
  /* end upload */
  .text-center{
    text-align: center;
  }

  .portal-row{
    width: 48%;
    float: left;
    padding-left: 10px;
    margin-bottom: 22px;
  }

  .over-hidden{
    width: 148px;
    height: 148px;
    overflow: hidden;
  }

  .allCon{
    position: relative;
  }

  .btnBox {
    position: absolute;
    bottom: 10px;
    left:10px;
    height: 50px;
    background: #fff;
    z-index: 100;
  }
  .btnBox1 {
    left:98px;
  }
  .scroll{
    overflow-y: auto;
    overflow-x:hidden;
    padding-right: 20px;
  }

  .title {
    height: 50px;
    color: #03B8CC;
    font-size: 16px;
  }

  .location{
    padding: 3px 0 15px 0;
  }

  .content{
    background: #fff;
    padding: 15px;
    overflow-y: auto;
    font-family: "微软雅黑";
    position: relative;
  }
</style>
